

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue组件</title>
    <script src="../libs/vue.js"></script>
    <link rel="stylesheet" href="../libs/animate.css">
    <style>
        .box{
            width:200px;
            height: 200px;
            background: darkcyan;
            color: #dfdfdf;
        }
        table{
            border:1px solid #999;
            background: deeppink;
            color:#fff;
        }
        tr td{
            border:1px solid #999;
            padding:10px;
        }
        ul{
            background: darkgoldenrod;
            width:40%;
        }
        .zoom-enter-active{
            animation: zoomInDown 1s;
        }
        .zoom-leave-active{
            animation: zoomOutDown 1s;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2>  {{title }} </h2>
        <h2>msg == {{msg }}</h2>
        <m-head></m-head>
        <hr>
        <!-- <button @click="flag=true">表格展示</button>
        <button @click="flag=false">列表展示</button>
        <mytable :cars="cars" v-if="flag"  ></mytable>
        <mylist :cars="cars"  v-else  ></mylist> -->
        <select v-model="cptname" >
            <option value="mytable">表格展示</option>
            <option value="mylist">列表展示</option>
        </select>
        <!-- 失活的组件将会被缓存！-->
        <keep-alive>
            <transition name="zoom" mode="out-in"  >
                <component :is="cptname" :cars="cars" ></component>
            </transition>
        </keep-alive>


    </div>
    <template id="mytable">
        <table>
            <thead>
                <tr>
                    <td>序号</td>
                    <td>品牌</td>
                    <td>型号</td>
                    <td>颜色</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(l,k,i) in cars" :key="i">
                    <td>{{i+1}}</td>
                    <td>{{l.brand}}</td>
                    <td>{{l.model}}</td>
                    <td>{{l.color }}</td>
                </tr>
            </tbody>
        </table>
    </template>
    <template id="mylist">
        <ul>
            <li v-for="(l,k,i) in cars" :key="i">
                <p>序号 {{i+1}}</p>
                <p>品牌 {{l.brand}}</p>
                <p>型号 {{l.model}}</p>
                <p>颜色 {{l.color }}</p>
            </li>
        </ul>
    </template>
    <script>
        // 全局注册
        const bus = new Vue()   // $emit $on $once 
        Vue.component("mHead",{
            template:"<header>Head - Head - wh2116daydayup </header>"
        })

        var cars = {
            car01 : {brand : "Ford", model : "Mustang", color : "red"},
            car02 : {brand : "Fiat", model : "500", color : "white"} ,
            car03 : {brand : "Volvo", model : "XC90", color : "black"}
        }

        Vue.component("mytable",{
            template:"#mytable",
            data(){
                return { }
            },
            props:['cars'],
            mounted(){
                console.log("组件载入")
            },
            activated(){
                console.log('组件已经激活了')
            },
            deactivated(){
                console.log('组件失去活力了')
            }
        })

        Vue.component("mylist",{
            template:"#mylist",
            props:['cars']
        })

        const vm = new Vue({
            data:{
                title:"Vue 动态组件切换 ",
                msg:"小型、独立和通常可复用的组件构建大型应用",
                cars:cars,
                flag:true,
                cptname:'mytable'
            },
            mounted(){
                document.getElementsByTagName('title')[0].innerHTML = this.title 
            }
        }).$mount("#app")
    </script>

    <!-- 
    component 官方组件
    is 属性   表示当前显示的组件 组件名称
    keep-alive  (记录滑动的高度)   失活的组件将会被缓存！   下一次失活组件重新激活的时候 会直接调用缓存数据  性能优化

    activated   激活
    deactivated 失活  
    
    transition 过渡组件 

    组件切换
    1. v-if
    2. v-show 
    3. component
    4. 路由 route 
    -->
</body>
</html>


